<template>
  <div>
    <header>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="表单设计器" name="first">
          <dynamic-form />
        </el-tab-pane>
        <el-tab-pane label="表单生成" name="second">
          <form-show />
        </el-tab-pane>
      </el-tabs>
    </header>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import dynamicForm from "../views/dynamic-form.vue";
import formShow from "../views/form.vue";

@Component({
  components: {
    dynamicForm,
    formShow
  }
})
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  activeName: string = "first";

  handleClick(val: any) {
    // console.log(val.name);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
header {
  padding: 20px;
}
</style>
